:root {
    /* #1 Iceberg Title */
    --size-1: 20px;
    --color-1: hsl(0, 0%, 5%);
    --font-1: 'Inter', sans-serif;
    --weight-1: 600;

    /* #2 Card Text Black */
    --size-2: 24px;
    --color-2: hsl(0, 0%, 5%);
    --font-2: 'Inter', sans-serif;
    --weight-2: 600;

    /* #6 Card Text Gray */
    --size-6: 20px;
    --color-6: hsl(0, 0%, 30%);
    --font-6: 'Inter', sans-serif;
    --weight-6: 600;

    /* #3 16px Helvetica Bold Black */
    --size-3: 16px;
    --color-3: hsl(0, 0%, 5%);
    --font-3: 'Inter', sans-serif;
    --weight-3: 600;

    /* #7 16px Helvetica Bold Black */
    --size-7: 20px;
    --color-7: hsl(0, 0%, 5%);
    --font-7: 'Inter', sans-serif;
    --weight-7: 300;
    
    /* #4 B3 Buttons */
    --size-4: 16px;
    --color-4: hsl(0, 0%, 30%);
    --font-4: 'Inter', sans-serif;
    --weight-4: 600;

    /* #5 Iceberg Subtext */
    --size-5: 16px;
    --color-5: hsl(0, 0%, 30%);
    --font-5: 'Inter', sans-serif;
    --weight-5: 300;

    /* Glass Gradient */
    --glass-bg: rgba(238, 238, 238, 0.5);
    --glass-border: 1.5px solid rgba(255, 255, 255, 0.4);
    --glass-blur: blur(10px);
    --glass-shine: 
        linear-gradient(135deg, hsla(0, 0%, 50%, 0.1) 0%, hsla(0, 0%, 50%, 0.1) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, 1) 100%);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.L1 {
    padding-top: 240px; /* Adjust this to match the height of your header */
    background-color: #dce3e6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    font-family: 'Helvetica', sans-serif;
}
/* Background Gradient Layer */
.L1::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* Your exact color with 0.8 opacity to allow for the blur */
background: #dce3e6;
pointer-events: none;
}
.HeaderContainer {
    position: fixed; /* Changed from sticky to fixed */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding-bottom: 15px;
    background: transparent;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
/* The Ghost Layer (Holds the Gradient Blur) */
.HeaderContainer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

/* 1. INCREASED BLUR: This distorts the content behind it */
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
/* 2. LOWER OPACITY: This is the key. 0.4 allows you to SEE the blur. */
background: hsla(199, 19%, 81%, 0.4);
/* 3. THE MASK: Keeps the top strong and bottom faded */
mask-image: linear-gradient(
to bottom,

rgba(0, 0, 0, 1.0) 40%,
rgba(0, 0, 0, 0.95) 60%,
rgba(0, 0, 0, 0.9) 70%,
rgba(0, 0, 0, 0.7) 85%,
rgba(0, 0, 0, 0.5) 90%,
rgba(0, 0, 0, 0.3) 95%,
rgba(0, 0, 0, 0.05) 100%

);
-webkit-mask-image: linear-gradient(
to bottom,

rgba(0, 0, 0, 1.0) 40%,
rgba(0, 0, 0, 0.95) 60%,
rgba(0, 0, 0, 0.9) 70%,
rgba(0, 0, 0, 0.7) 85%,
rgba(0, 0, 0, 0.5) 90%,
rgba(0, 0, 0, 0.3) 95%,
rgba(0, 0, 0, 0.05) 100%
);
}
.I1T1 {
    --top-wall-dist: 20px;
    --i1-t1-gap: 15px;
    display: flex;
    align-items: center;
    justify-content: center; /* Keep the overall group centered */
    padding-top: var(--top-wall-dist);
    /* padding right aligns the logo with the b3 buttons left */

    gap: var(--i1-t1-gap);
    width: 100%;        /* 1. Add this to ensure it spans the whole screen */
    margin-left: 0;     /* 2. Remove the 10px margin */
    margin-right: 0;    /* 3. Remove the 10px margin */
    padding-right: 0;   /* 4. ENSURE this is 0 (it was 19px previously) */
}
.T1 {
    --gap-top-mid: 2px;
    --gap-mid-bot: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* This aligns the 'H' in HVAC and 'L' in License */
    text-align: left;        /* Ensures text doesn't try to center inside the box */
}
.T13T {
font-family: var(--font-1);
font-weight: var(--weight-1);
font-size: var(--size-1);
color: var(--color-1);
margin-bottom: var(--gap-top-mid);
}
.T14M {
font-family: var(--font-5);
font-weight: var(--weight-5);
font-size: var(--size-5);
color: var(--color-5);
margin-bottom: var(--gap-mid-bot);
}
.T14B {
font-family: var(--font-5);
font-weight: var(--weight-5);
font-size: var(--size-5);
color: var(--color-5);
letter-spacing: -1px;
}
.I1 {
    /* --- THE SLIDER --- */
    --logo-size: 85%;      /* Change this % to adjust your logo size (0% to 100%) */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--glass-bg);
    border: var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.LogoImg {
    width: var(--logo-size); /* This connects the image size to the 'slider' variable above */
    height: auto;
    display: block;
    object-fit: contain;  /* Removed mix-blend-mode since your logo is already transparent */
}
.B3 {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
display: flex;
justify-content: center;
gap: 15px;
}
.B3 a {
    --icon-size: 30px;       /* Adjust icon height */
    --icon-top-dist: 8px;    /* Distance from top wall */
    --text-bot-dist: 5px;    /* Distance from bottom wall */

    width: 115px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;        /* Pushes icon to top wall and text to bottom wall */
    padding-top: var(--icon-top-dist);     /* These paddings use the sliders above */
    padding-bottom: var(--text-bot-dist);
    text-decoration: none;
    border-radius: 28px;
    cursor: pointer;
    /* Glassmorphism Effect */
    border: var(--glass-border); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background-color: var(--glass-bg);
    background-image: var(--glass-shine); /* Points to your shine gradient */
    background-origin: border-box;        /* These ensure the glass effect layers correctly */
    background-clip: padding-box, border-box;

    font-family: var(--font-4);
    font-size: var(--size-4);
    font-weight: var(--weight-4);
    color: var(--color-4);

    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                background-image 0.8s ease, 
                box-shadow 0.8s ease;
    flex-shrink: 1;    /* Allows buttons to narrow down if the screen is too small */
    min-width: 0;      /* Prevents text from forcing the button to stay wide */
}
/* Individual Icon Controls */
.CBI, .MBI, .RBI {
    height: var(--icon-size);
    width: auto;
    display: block;
    object-fit: contain;
    flex-shrink: 0; /* Prevents icon from squishing */
}
.B3 a:active {
    transform: scale(0.92) !important; /* Forces a quick "squish" */
    transition: transform 0.1s ease !important; /* Makes the press feel instant */
}
.B3 a.active {
background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
transform: scale(1);
}
/* Define the Fade In Animation */
@keyframes fadeEffect {

from { opacity: 0; }

to { opacity: 1; }

}
.PageContent h2,
.PageContent p {

padding: 0 20px;

}
/* fade into a page effect + dead space at the end */
.PageContent {
margin-top: -20px;
padding: 0; /* Removed side padding so Carousels touch walls */
padding-bottom: 100px;
text-align: center;
/* Fade In Animation */
animation: fadeEffect 1.1s ease-in-out;
}
.MOT, .MIT, .MRT, .MMT {
    font-family: var(--font-2);
    font-size: var(--size-2);
    color: var(--color-2);
    font-weight: var(--weight-2);
    text-align: left;
    margin-left: 20px;
    margin-top: 40px;
    margin-bottom: 0px;
    padding: 0;
    display: block;
    width: auto;      /* Lets it fill the screen naturally */
    max-width: none;  /* Removes the "narrow box" restriction */
    line-height: 1.1;
}
.MOT span, .MIT span, .MRT span, .MMT span {
    font-family: var(--font-6);
    font-size: var(--size-6);
    color: var(--color-6);
    font-weight: var(--weight-6);
    display: block; 
    margin-left: 0px; 
    margin-top: 4px;
}
.carousel-spacer {

display: block;

position: relative;

margin-top: 20px;

margin-bottom: 25px;

width: 100%;

}
.c-container {

overflow-x: auto;

overflow-y: hidden;

-webkit-overflow-scrolling: touch;

scrollbar-width: none;

scroll-snap-type: x mandatory;

scroll-behavior: smooth;

padding-bottom: 10px;

}
.c-container::-webkit-scrollbar { display: none; }
.c-track {

display: flex;

flex-wrap: nowrap;

align-items: stretch;

}
.c-item {

flex-shrink: 0;
margin-right: 13px;
scroll-snap-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
width: 80vw; /* Mobile Size */

}
.c-track::before, .c-track::after {
content: '';
flex-shrink: 0;
width: 20px;
}
.c-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none; /* Add this line */
    user-select: none;    /* Add this line */
}
.nav-btn { display: none; }
/* Specific sizing for Horizontal/Offer images (510x330) */
.horizontal-item {
    width: 85vw !important; 
    /* The ratio calculation: (330 / 510) * 85vw = 55vw */
    height: auto; 
    display: flex;
    flex-direction: column;
}
.horizontal-item .c-image {
    width: 100%;
    height: auto;
    border-radius: 15px; 
    /* This ensures the box stays exactly the right shape for a 510x330 image */
    aspect-ratio: 510 / 330; 
    object-fit: contain; 
    display: block;
}
/* --- CONTACT BUTTONS --- */
/* Shared Container Style */
.PB1, .PB2 {
    /* 1. SIZE & WALL DISTANCE */
    height: 85px; 
    margin-left: 15px;  /* Matches your page standard */
    margin-right: 15px; /* Matches your page standard */
    position: relative;
    /* 2. INTERIOR LAYOUT (The 20px/15px Logic) */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Pushes Row 1 to Top, Row 2 to Bottom */
    /* This creates the exact spacing from the walls you requested */
    gap: 10px;
    padding-top: 15px; 
    padding-bottom: 15px;
    padding-left: 15px; 
    padding-right: 15px; /* Added right padding for balance */
    box-sizing: border-box; /* Ensures padding doesn't increase the 140px height */

    /* 3. GLASSMOPRHISM (Matches B3) */
    text-decoration: none;
    border-radius: 60px;
    cursor: pointer;
    border: var(--glass-border); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background-color: var(--glass-bg);
    background-image: var(--glass-shine);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /* 4. ANIMATION (Matches B3) */
    transition: transform 0.2s ease, background-image 0.8s ease, box-shadow 0.8s ease;
}
/* Margins to separate the buttons vertically */
.PB1 { margin-top: 20px; }
.PB2 { margin-top: 15px; }
#CBI1, #CBI2 {
    position: absolute;  /* Takes it out of the row flow */
    right: 10px;         /* 15px from right wall */
    top: 50%;            /* Middle of the button height */
    transform: translateY(-50%); /* Precise vertical centering */
    height: 75px;
    width: auto;
}
#CBN2 {
    transform: scaleX(0.95); 
    transform-origin: left;
    white-space: nowrap; 
}
.AboutPhotoWrapper {
    width: 100%;
    /* Creates the 15px gap on mobile to match the PB1/PB2 buttons */
    padding: 0 15px; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.CompanyPhoto {
    width: 100%;
    /* Matches the max-width of your Contact buttons (PB1/PB2) */
    max-width: 500px; 
    height: auto;
    border-radius: 15px; 
    display: block;
    /* Optional: subtle shadow to match the professional design */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.AboutDescription {
    width: 100%;
    padding: 0 15px; /* Matches the 15px side gap of your PB1/PB2 buttons */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.DescriptionText {
    width: 100%;
    max-width: 500px; /* Matches CompanyPhoto and Contact buttons */
    text-align: left;
    padding: 0 !important; /* Forces the container to the absolute edge */
}
/* Apply #7 Preset and Reset Margins */
.MainBio, .ClosingBio, .HelpIntro {
    font-family: var(--font-7);
    font-size: var(--size-7);
    color: var(--color-7);
    font-weight: var(--weight-7);
    line-height: 1.4;
    margin-bottom: 12px;
    
    /* --- THE FIX --- */
    margin-left: 0 !important;   /* Forces text to the left wall */
    padding-left: 0 !important;  /* Removes any inherited padding */
}
/* Dotted List Alignment */
.HelpList {
    list-style-type: "• "; 
    /* This allows the bullet to sit slightly in, or set to 1em to pull it closer to the wall */
    padding-left: 1.1em; 
    margin-left: 0 !important;
    margin-bottom: 12px;
}
.HelpList li {
    font-family: var(--font-7);
    font-size: var(--size-7);
    color: var(--color-7);
    font-weight: var(--weight-7);
    margin-bottom: 4px;
    padding-left: 5px; 
}

/* Phone Button */
.PB-Row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Keeps CBT and CBN on the left wall */
    width: 100%;
    padding-right: 15px;         /* 15px buffer for the icon */
    box-sizing: border-box;
}
.PB-Name {
    font-family: var(--font-3);
    font-weight: var(--weight-3);
    font-size: var(--size-3);
    color: var(--color-3);
    line-height: 1;
}
.PB-Phone {
    font-family: var(--font-5);
    font-weight: var(--weight-5);
    font-size: var(--size-5);
    color: var(--color-5); /* Using color-4 to match the preset */
    line-height: 1;
}

/* --- RUB: RATE US BUTTON --- */
.RUB {
    /* 1. SIZE & POSITION */
    height: 60px; 
    margin: 20px 15px 0 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px;
    box-sizing: border-box;
    text-decoration: none;

    /* 2. GLASS EFFECT (Matches B3) */
    border-radius: 60px;
    border: var(--glass-border); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background-color: var(--glass-bg);
    background-image: var(--glass-shine);
    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* 3. TEXT STYLE #4 */
    font-family: var(--font-4);
    font-size: var(--size-4);
    font-weight: var(--weight-4);
    color: var(--color-4);
    
    cursor: pointer;
    transition: transform 0.2s ease, background-image 0.8s ease;
}
.RUB-Col {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.RUB-Mid {
    flex-grow: 1;
    justify-content: center;
}
.RUB-Right { 
    justify-content: flex-end; 
    text-decoration: underline;    /* Adds the underline */
    text-underline-offset: 4px;    /* Optional: Gives space between text and line */
}
.RUB-Star {
    height: 18px; 
    width: auto;
    margin-right: 6px;
}
.RUB:active {
    transform: scale(0.98) !important; 
    background-color: #ffffff !important;
    background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.1s ease, background-color 0.1s ease;
}

/* --- BWC Businesses we worked with carosel --- */
/* Target the specific track to control the gap */
/* Align the carousel start with the text headers */
/* Ensure the Business Carousel aligns exactly like the others */
/* Target the track to match the global alignment */
/* 1. Reset the Business track to match global behavior */
/* 1. Add a spacer to the start of the track to match your 15px/20px page margin */
/* --- THE FIX FOR WALL TOUCHING --- */

/* 1. Ensure the track has no padding that gets ignored */
#BWC .c-track {
    display: flex;
    gap: 10px;
    padding-left: 0 !important;
}

/* 2. Push ONLY the first item away from the left wall */
#BWC .bwc-item:first-child {
    margin-left: 15px !important; /* Matches your page margin */
}

/* 3. Push ONLY the last item away from the right wall */
#BWC .bwc-item:last-child {
    margin-right: 15px !important;
}

/* 4. Keep the item size strict */
#BWC .bwc-item {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    scroll-snap-align: start;
}

/* IP Page Selector Styles */
.B2-Selector {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
    
    /* THE FIX: Matches RUB and PB buttons */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px; /* Side buffer for smaller screens */
    width: 100%;
}

.sub-btn {
    /* Changed to flex: 1 so they split the 500px width evenly */
    flex: 1; 
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 28px;
    
    /* Glass Preset */
    border: var(--glass-border); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background-color: var(--glass-bg);
    background-image: var(--glass-shine);
    
    /* Font #4 */
    font-family: var(--font-4);
    font-size: var(--size-4);
    font-weight: var(--weight-4);
    color: var(--color-4);
    transition: all 0.3s ease;
    
    min-width: 0; /* Prevents overflow on very small phones */
}

.sub-btn.active {
    background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
    color: var(--color-1); /* Optional: makes text sharper when active */
}

.sub-icon {
    height: 18px; 
    width: auto;
}

.sub-btn:active {
    transform: scale(0.95);
}

/* Hover and click animations */
@media (hover: hover) {
    .PB1:hover, .PB2:hover {
        transform: translateY(-2px); 
        background-color: rgba(238, 238, 238, 0.7); 
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
        border: 1.5px solid rgba(255, 255, 255, 0.8); 
    }

    .B3 a:hover:not(.active) { /* Only lift if the button isn't active */
    transform: translateY(-2px);
    background-color: rgba(238, 238, 238, 0.7);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    }
}
.PB1:active, .PB2:active {
    /* 1. The Squish */
    transform: scale(0.98) !important; 
    
    /* 2. The White Flash (Matches B3) */
    background-color: #ffffff !important;
    background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4) !important;
    
    /* 3. Transition speed for instant feel */
    transition: transform 0.1s ease, background-color 0.1s ease;
}

/* Desktop adjustments */
@media (min-width: 768px) {
    .AboutPhotoWrapper, .AboutDescription {
        padding: 0; 
        margin-top: 20px;
    }      

    .RUB, .PB1, .PB2 {
        max-width: 500px; 
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .c-container {
        padding-left: 0; 
        scroll-snap-type: none; 
        display: block;            /* Changed from flex to block */
        width: 100%;
        overflow-x: auto;          
        scrollbar-width: none; 
        text-align: center;        /* Helps inline-flex children center */
    }
    .c-container::-webkit-scrollbar { display: none; }

    .c-track {
        display: inline-flex;      /* Inline-flex allows it to be centered by the container */
        width: max-content; 
        min-width: 100%;           /* Ensures it fills the screen to allow centering */
        justify-content: center;   
        padding: 0 40px;           /* Extra breathing room for the edges */
    }

    .c-track::before, .c-track::after { 
        display: none; 
    }

    .c-item { 
        width: 300px; 
        margin: 0 6.5px;           /* Split your 13px margin to both sides for perfect centering */
        scroll-snap-align: unset; 
        flex-shrink: 0;            
    }

    .horizontal-item {
        width: 650px !important; 
        margin-left: auto;         
        margin-right: auto;        
    }

    .horizontal-item .c-image {
        height: 330px;
        aspect-ratio: 510 / 330;
    }

    .nav-btn {
        display: flex;
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 40px; height: 40px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 50%; border: 1px solid #ddd;
        cursor: pointer; z-index: 10;
        align-items: center; justify-content: center;
    }

    .btn-prev { left: 5px; }
    .btn-next { right: 15px; }

    .PageContent {
        padding-left: 0px; 
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    .MOT, .MIT, .MRT, .MMT {
        margin-left: 0;
        text-align: center;
        width: 100%;
    }

    /* RESET the margins so the row stays perfectly centered on PC */
    #BWC .bwc-item:first-child {
        margin-left: 0 !important;
    }
    #BWC .bwc-item:last-child {
        margin-right: 0 !important;
    }
    /* Optional: Ensure the gap logic is clean on desktop */
    #BWC .c-track {
        gap: 20px; /* You might want more space between logos on PC */
    }
}

/* Phone adjustments */
@media (max-width: 400px) {
    .B3 { 
        /* Centers the buttons and forces a 5px minimum gap */
        display: flex;
        justify-content: space-between; /* Pushes left/right buttons to the walls */
        width: auto;
        margin-left: 25px;  /* Matches your PB1, PB2, and Bio margins */
        margin-right: 25px; /* Matches your PB1, PB2, and Bio margins */
        gap: 8px;
    }

    .B3 a {
        /* Allows buttons to narrow down to respect the gap */
        width: 100px;        /* Reduced from 115px */
        height: 62px;       /* Reduced from 70px */
        border-radius: 24px; /* Slightly smaller radius to match the scale */
        
        --icon-size: 24px;   /* Shrinks the icon height slightly */
        --icon-top-dist: 6px; 
        --text-bot-dist: 4px;
        
        font-size: 14px;     /* Optional: slightly smaller font for the smaller button */
        flex-shrink: 1;
        min-width: 0;
    }
}